<template>
    <div class="ConfigAddup">
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
            <span>这是一段信息</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <div class="au_top">
            <el-form ref="form" :model="form" label-width="100px">
                <div v-for="(item, index) in AU_top" :key="index">
                    <div v-if="item.type == 'single_line_text'">
                        <el-form-item :label="item.prop">
                            <el-input v-model="form[item.label]"></el-input>
                        </el-form-item>
                    </div>
                    <div v-if="item.type == 'enum_type'">
                        <!-- {{ item }} -->
                        <el-form-item :label="item.prop">
                            <el-select v-model="form[item.label]">
                                <el-option v-for="(v, i) in EnList" :key="i" :label="v.enumTypeName" :value="v.enumTypeName">{{
                                    v.enumTypeName
                                }}</el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div v-if="item.type == 'date'">
                        <el-form-item :label="item.prop">
                            <el-date-picker
                                v-model="form[item.label]"
                                type="date"
                                placeholder="选择日期"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd"
                            ></el-date-picker>
                        </el-form-item>
                    </div>

                    <div v-if="item.type == 'basic_data'">
                        <el-form-item :label="item.prop">
                            <div class="basicBox">
                                <el-input v-model="form[item.label]">
                                    <i slot="suffix" class="el-icon-search" @click="show(item)"></i>
                                </el-input>
                            </div>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
        </div>
        <div>
            <div :class="bool ? 'TableBodyBox' : 'on'">
                <el-table :data="tableDataList" border style="width: 100%">
                    <el-table-column v-for="(item, index) in tableData" :key="index" :prop="item.label" :label="item.prop">
                        <div v-if="item.type == 'single_line_text'">
                            <input v-model="text[item.label]" />
                        </div>
                        <div v-if="item.type == 'date'">
                            <el-date-picker
                                v-model="text[item.label]"
                                type="date"
                                placeholder="选择日期"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd"
                            ></el-date-picker>
                        </div>

                        <div v-if="item.type == 'basic_data'">
                            <el-select v-model="text[item.label]">
                                <el-option v-for="(v, i) in basicDataList[item.label]" :key="i" :label="v.name" :value="v.name"></el-option>
                            </el-select>
                        </div>
                    </el-table-column>
                </el-table>

                <ul class="BodyBox_btns">
                    <li v-for="(item, index) in BodyBox_btns" :key="index" @click="BodyBtn(item)">
                        <span>{{ item.name }}</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="au_bot">
            <p class="Line"></p>
            <el-form ref="form" :model="form" label-width="100px">
                <div v-for="(item, index) in AU_bot" :key="index">
                    <div v-for="(ev, ei) in item.child" :key="ei">
                        <div v-if="ev.attributeKey == 'disabled'">
                            <div v-if="item.type == 'single_line_text'">
                                <el-form-item :label="item.prop">
                                    <el-input v-model="form[item.label]"></el-input>
                                </el-form-item>
                            </div>
                            <div v-if="item.type == 'date'">
                                <el-form-item :label="item.prop">
                                    <el-date-picker
                                        disabled
                                        v-model="form[item.label]"
                                        type="date"
                                        placeholder="选择日期"
                                        format="yyyy 年 MM 月 dd 日"
                                        value-format="yyyy-MM-dd"
                                    ></el-date-picker>
                                </el-form-item>
                            </div>

                            <div v-if="item.type == 'basic_data'">
                                <el-form-item :label="item.prop">
                                    <el-input
                                        v-if="ev.attributeValue == '1'"
                                        disabled
                                        v-model="form[item.label]"
                                        suffix-icon="el-icon-search"
                                    ></el-input>
                                </el-form-item>
                            </div>
                        </div>
                    </div>
                </div>
            </el-form>
        </div>
    </div>
</template>
<script>
import { basicData, GetEnumTypeValue, GetAllEnumTypeValue } from '@/api/index';
export default {
    props: ['fom', 'tabList'],
    name: 'ConfigAddup',
    data() {
        return {
            AU_top: [],
            AU_bot: [],
            form: {},
            basicDataList: {},
            value1: '',
            value2: '',
            bool: null,
            BodyBox_btns: [
                { name: '添加行', btns: 'addrow' },
                { name: '删除行', btns: 'delrow' }
            ],
            tableData: [],
            tableDataList: [],
            text: {},
            Tbodyobj: {},
            EnList: [],
            dialogVisible: false
        };
    },
    mounted() {
        this.PageFun();
        this.tableData = JSON.parse(sessionStorage.getItem('TableBody'));
        this.Tbodyobj = this.$route.query;
        if (this.Tbodyobj.name == 'Upd') {
            this.form = this.$route.query.obj;
        }
        GetAllEnumTypeValue().then(({ data }) => {
            this.EnList = data;
        });
    },
    methods: {
        //模态框展示
        show(item) {
            console.log(item);
        },
        BodyBtn(item) {

            switch (item.btns) {
                case 'addrow':
                    console.log(this.fom);
                    this.text;
                    break;
                case 'delrow':
                    this.tableDataList.pop();
                    break;

                default:
                    break;
            }
        },
        //获取基础资料的信息
        basicDataFun() {
            let TableHeader = JSON.parse(sessionStorage.getItem('TableHeader'));
            basicData(TableId.tabId).then(({ data }) => {
                this.basicDataList = data.data[TableId.tabIdentification];
            });
        },
        //获取枚举类型
        Entype(param) {
            console.log(param);

            // GetEnumTypeValue(param).then((res) => {
            //     console.log(res);
            // });
        },
        //获取页面的方法
        PageFun() {
            let TableHeader = JSON.parse(sessionStorage.getItem('TableHeader'));
            this.bool = JSON.parse(sessionStorage.getItem('tableHeaddataparam')).existEntity;
            let idt = JSON.parse(sessionStorage.getItem('tableHeaddataparam')).tabIdentificationEntry;
            TableHeader.forEach((v, i) => {
                if (v.label == 'creator') {
                    this.AU_bot.push(v);
                } else if (v.label == 'modifier') {
                    this.AU_bot.push(v);
                } else if (v.label == 'verifier') {
                    this.AU_bot.push(v);
                } else if (v.label == 'create_time') {
                    this.AU_bot.push(v);
                } else if (v.label == 'modified_time') {
                    this.AU_bot.push(v);
                } else if (v.label == 'verify_time') {
                    this.AU_bot.push(v);
                } else {
                    this.AU_top.push(v);
                }
            });
            this.AU_top.forEach((v, i) => {
                if (v.prop == '编号') {
                    this.AU_top.splice(i, 1, this.AU_top[0]);
                    this.AU_top.splice(0, 1, v);
                }
            });
            console.log(this.AU_top);
            this.AU_top.forEach((v, i) => {
                if (v.type == 'single_line_text') {
                    v.child.forEach((ev, ei) => {
                        if (ev.attributeKey == 'enum_type') {
                            console.log(ev);
                        }
                    });
                    console.log(v);
                }
            });
        }
    },
    watch: {
        form: function (newVal, oldVal) {
            this.$emit('update:fom', newVal);
        },
        tableDataList: function (newVal) {
            this.$emit('update:tabList', newVal);
        }
    }
};
</script>
<style lang="less" scoped>
.ConfigAddup {
    width: 100%;
    height: 90%;
    padding: 0 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .au_top,
    .au_bot {
        width: 100%;
        .el-form {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            > div {
                margin-left: 10px;
                margin-top: 10px;
            }
        }
    }
    .Line {
        width: 100%;
        border: 1px solid #eee;
        display: block;
    }
    .on {
        display: none;
    }
    .TableBodyBox {
        border: 1px solid #ccc;
        padding: 26px;
        box-sizing: border-box;
        .BodyBox_btns {
            width: 100%;
            display: flex;
            margin-top: 30px;
            justify-content: flex-end;
            span {
                border: 1px solid #ccc;
                padding: 9px 26px;
                box-sizing: border-box;
                border-radius: 4px;
                margin-right: 13px;
                cursor: pointer;
            }
        }
    }
}
</style>